<template>
  <div class="min-h-screen bg-gray-40 p-8">
    <div class="mx-auto max-w-7xl bg-white rounded-lg shadow-sm">
      <div class="p-6">
        <div class=" mx-auto py-8">
          <div class="space-y-6">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="完成した" name="first">
                <el-table :data="tableData" empty-text="データなし">
                  <el-table-column align="center"  label="番号" width="400">
                    <template slot-scope="scope">
                      {{ scope.$index+1  }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="category_name" label="カテゴリー" width="400">
                  </el-table-column>
                  <el-table-column align="center" label="完成時間" width="400">
                    <template slot-scope="scope">
                      {{ getTime(scope.row.updated_at) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="score" label="得点" width="100">
                  </el-table-column>
                  <el-table-column align="center" prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" @click="viewDetail(scope.row)">詳細</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="px-6 py-4 flex items-center justify-between border-t">

                  <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                    :page-size.sync="pageSize" :total="total" :page-sizes="[10, 20, 30, 40]"
                    layout="prev, pager, next" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="未完成" name="second" >
                <el-table :data="tableData2" empty-text="データなし">
                  <el-table-column align="center"  label="番号" width="400">
                    <template slot-scope="scope">
                      {{ scope.$index+1  }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="category_name" label="カテゴリー" width="400">
                  </el-table-column>
                  <el-table-column align="center"  label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" @click="start(scope.row)">問題解答</el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>

                    </template>
                  </el-table-column>
                </el-table>
                <div class="px-6 py-4 flex items-center justify-between border-t">

                  <el-pagination @current-change="handleChange" :current-page.sync="currentPage1" background
                    :page-size.sync="pageSize" :total="total" :page-sizes="[10, 20, 30, 40]"
                    layout="prev, pager, next" />
                </div>
              </el-tab-pane>
            </el-tabs>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tiemUtil from "@/utils/timeUtil"

import { get } from "@/http/axios";
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [],
      currentPage: 1,
      currentPage1:1,
      pageSize: 10,
      tableData2: [],
      total: 0
    }
  },
  async mounted() {
    await this.getSuccesList(1)
  },
  methods: {
    start(row){
      this.$router.push({ path: "/exercise", query: { branch_id: row.branch_id,id: row.category_id,next:true} })
    },
    viewDetail(row) {
      this.$router.push({ path: "/suceesView", query: { branch_id: row.branch_id } })
    },
    getTime(date) {
      return tiemUtil(date)
    },
    async handleClick(tab, event) {
      if (tab.index == 0) {
        await this.getSuccesList(this.currentPage)
      } else {
        await this.getList(this.currentPage1)
      }
    },
    async handleCurrentChange(val) {
      await this.getSuccesList(val)
    },
    async handleChange(val) {
      await this.getList(val)
    },
    async del(id) {
      let data = await get(`/del_fil_list?id=${id}`)
      if (data.data.code == "success") {
        this.$message({
          message: '削除完了',
          type: 'success'
        });
        await this.getList(this.currentPage1)
      }
    },
    async getList(pageNum) {
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      let data = await get(`/fil_list?current_page=${pageNum}`)
      loading.close()
      this.tableData2 = data.data.data.list
      this.total = data.data.data.paginator.total_record
      this.currentPage1 = data.data.data.paginator.current_page
    },
    async getSuccesList(pageNum) {
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      let data = await get(`/sucees_list?current_page=${pageNum}`)
      loading.close()
      this.tableData = data.data.data.list
      this.total = data.data.data.paginator.total_record
      this.currentPage = data.data.data.paginator.current_page
    }
  }
}
</script>